/* L5 发布订阅模式(有事件中心)
*/
// Vue的自定义事件
let vm = new Vue()
vm.$on('dataChange', () => {
  console.log('dataChange')
})
vm.$on('dataChange', () => {
  console.log('dataChange1')
})
vm.$emit('dataChange')

// 兄弟组件通信过程
// eventBus.js
// 事件中心
let eventHub = new Vue()

// ComponentA.vue 发布者
addTodo: () => {
  eventHub.$emit('add-todo', { text: this.newTodoText })
  this.newTodoText = ''
}

// ComponentB.vue 订阅者
created: () => {
  eventHub.$on('add-todo', this.addTodo)
}


// 模拟发布订阅模式-事件触发器
class EventEmitter {
  constructor () {
    // { 'click': [fn1, fn2], 'change': [fn] }
    // 事件中心记录每个事件及其订阅者
    this.subs = Object.create(null)
  }
  // 订阅事件的方法
  $on (eventType, handler) {
    this.subs[eventType] = this.subs[eventType] || []
    this.subs[eventType].push(handler)
  }
  // 发布事件的方法
  $emit (eventType) {
    if(this.subs[eventType]) {
      const handlers = this.subs[eventType]
      handlers.forEach(handler => {
        handler()
      });
    }
  }
}
// 测试
const em = new EventEmitter()
em.$on('change', () => {
  console.log('change01')
})
em.$on('change', () => {
  console.log('change02')
})
setTimeout(() => {
  em.$emit('change')
  em.$emit('click')
}, 2000)

